<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <title>本地扫码打印系统</title>
</head>

<body>
    <div class="container">
        <header>
            <h1>本地扫码打印系统</h1>
            <p class="subtitle">扫描二维码，轻松提交打印任务</p>
        </header>

        <div class="main-content">
            <div class="qr-section">
                <h2 class="section-title">扫描打印</h2>
                <div class="qr-container">
                    <div class="qr-code">
                        <img id="qrImage" src="/qrcode" alt="扫描二维码">
                    </div>
                    <p>使用手机扫描二维码提交打印文件</p>
                    <p class="status">
                        <span class="status-indicator" id="statusIndicator"></span>
                        状态: <span id="statusText">等待连接</span>
                    </p>
                    <p>服务器地址: <span id="serverAddress">localhost:8080</span></p>
                </div>

                <div class="controls">
                    <!-- 手动刷新队列按钮 -->
                    <button class="btn btn-primary" id="refreshQueueBtn">刷新队列</button>
                    <button class="btn btn-primary" id="uploadSetBtn">更新设置</button>
                    <!-- 手动刷新队列按钮 -->
                    <button class="btn btn-primary" id="generateQR">刷新二维码</button>
                    <button class="btn btn-secondary" id="reset">重置系统</button>
                </div>

                <div class="instructions">
                    <h3>使用说明</h3>
                    <ol>
                        <li>确保您的设备和手机在同一局域网</li>
                        <li>使用手机扫描上方二维码</li>
                        <li>在手机上选择要打印的文件</li>
                        <li>提交后文件将加入打印队列</li>
                        <li>点击"打印"按钮完成打印</li>
                        <li><strong>注意：</strong>图片文件会自动转换为PDF格式打印</li>
                    </ol>
                </div>
            </div>

            <div class="print-section">
                <h2 class="section-title">打印队列</h2>
                <div class="print-queue" id="queue">
                    <div class="status">打印队列为空</div>
                </div>

                <div class="print-options">
                    <h4>打印设置</h4>
                    <!-- 自动打印 -->
                    <div class="option-group">
                        <label for="autoPrint">自动打印:</label>
                        <input type="checkbox" id="autoPrint" name="autoPrint" checked>
                    </div>
                    <!-- 自动打印 -->
                    <!-- 打印机选择 -->
                    <div class="option-group">
                        <label for="printerSelect">打印机:</label>
                        <select id="printerSelect">
                            <option value="">正在加载打印机...</option>
                        </select>
                        <button class="btn btn-small" id="refreshPrinters" title="刷新打印机列表">
                            ↻
                        </button>
                    </div>
                    <div class="option-group">
                        <label for="pageSize">纸张大小:</label>
                        <select id="pageSize">
                            <option value="A4" selected>A4</option>
                            <option value="Letter">Letter</option>
                            <option value="Legal">Legal</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label for="orientation">方向:</label>
                        <select id="orientation">
                            <option value="portrait" selected>纵向</option>
                            <option value="landscape">横向</option>
                        </select>
                    </div>
                </div>

                <div class="controls">
                    <button class="btn btn-primary" id="printAll">打印全部</button>
                    <button class="btn btn-secondary" id="clearQueue">清空队列</button>
                </div>

                <div class="instructions">
                    <h3>打印说明</h3>
                    <p>系统默认使用A4纸张黑白打印，图片文件会自动转换为PDF格式。</p>
                    <p>支持的文件格式: PDF, JPG, PNG, TXT</p>
                    <p>最大文件大小: 10MB</p>
                </div>
            </div>
        </div>

        <footer>
            <p>本地扫码打印系统 &copy; 2025 | 基于 Go + Gin</p>
        </footer>
    </div>

    <div id="notification" class="notification"></div>
    <script src="/static/js/index.js"></script>
</body>

</html>